@import './var.scss';

.edit-page-input{
	outline: none;
	height: 40px;
	border: none;
	background: $blue4;
	color: $blue1;
	width: 256px;
	text-indent: 10px;
}
.layerlist{
	width: 170px;
	padding: 5px;
	background: $blue5;
	position: absolute;
	top: 66px;
	left: 480px;
	z-index: 1000;
	color: $blue1;
	box-shadow:0 0 5px rgba(0,0,0,.5);
	a{
		color: $blue1;
	}
	.iconfont{
		color: $yellow;
		font-size: 18px;
	}
	.layerlist-icon{
		transform: rotate(180deg);
	}
	h1{
		font-size: 14px;
		padding: 5px 0;
		vertical-align: middle;
		cursor: move;
		i,a,span{
			float: left;
		}
		a{
			float: right;
		}
		span{
			margin-left: 5px;
		}
	}
	ul{
		font-size: 12px;
		background:$blue4;
		max-height: 500px;
		overflow-y: auto;
		overflow-x: hidden;
		li{
			margin:0;
			height: 24px;
			line-height: 24px;
			border-bottom:1px solid $blue5;
			cursor: pointer;
			a{
				display: inline-block;
				vertical-align: middle;
				cursor: pointer;
				height: 100%;
				width: 25px;
				text-align: center;
				float: left;
				&:hover{
					background: $yellow;
					.iconfont{
						color: #fff;
					}
				}
			}
			span{
				vertical-align: middle;
				display: inline-block;
				height: 100%;
				border-left:1px solid $blue5;
				border-right:1px solid $blue5;
				float: left;
				width: 86px;
				text-indent: 10px;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
		.active{
			background:$yellow;
			color:$white;
			.iconfont{
				color:$white;
			}
		}
		.showlayer_hide{
			.iconfont{
				color: $blue5;
			}
		}
	}
}